<%@page import="isquirrel.servlets.handler.HttpDBServlet" %>
<%@page import="isquirrel.beans.User" %>
<%@page import="isquirrel.UserManager" %>
<%@page import="isquirrel.util.HibernateUtil" %>
<%@page import="isquirrel.util.Utilities" %>

<%@page import="java.text.SimpleDateFormat" %>


<% 
	HibernateUtil.beginTransaction();
	User user = UserManager.getUser((String) session.getAttribute("user")); 
	HibernateUtil.commit();
%>
<div id="editprofile">
	<div class="profile_header">Password<span onclick="window.show('password');" id="password_edit_btn" class="profile_change_section">edit</span></div>
	<div><span id="password_pre_text">********** </span>
		<form style="display:none" id="passwordform" method="post" action="servlet/EditUserProfile">
		<p>
			<label for="old_password">Old Password *</label><br>
			<input class="biginput" type="password" id="old_password" name="old_password"/> 
		</p>
		<p>
			<label for="new_password">New Password *</label><br>
			<input class="biginput" type="password" id="new_password" name="new_password"/> 
		</p>
		<p>
			<label for="new_password">Confirm New Password *</label><br>
			<input class="biginput" type="password" id="confirm_new_password" name="confirm_new_password"/> 
		</p>
		<input type="submit" class="mediumbtn" name="submit" value="Change"/>	
		<input type="hidden" id="type" name="type" value="0"/>	
		
		<div id="password_status"></div>
	</form>
	</div>
	<br>
	<script type="text/javascript">
		new Fudel.Form('passwordform', { 
			enableOnOk: true,
			onOK : function() {
				var form = $('passwordform');
				form.fade({queue: {position: 'end', scope:'dob'}});
				form.getElements().each(function(item){item.enable();});
				form.submit.value="Change";
				$('password_pre_text').appear({duration: 0, queue: {position: 'end', scope:'dob'}});
				$('password_edit_btn').update("edit");
			},
			onError : function(obj) {
				alert(obj.ERROR);
			}
		});
	</script>

	<div class="profile_header">First name<span onclick="window.show('firstname');" id="firstname_edit_btn" class="profile_change_section">edit</span></div>
	<div><span id="firstname_pre_text"><%= user.getFirstName() %></span>  
		<form style="display:none" id="firstnameform" method="post" action="servlet/EditUserProfile">
			<p>
				<input class="biginput" type="text" id="name" name="name"/>
			</p>
			<input type="submit" id="firstnamebtn" class="mediumbtn" name="Change" value="Change"/>
			<input type="hidden" id="type" name="type" value="1"/>	
		</form>
	</div>
	<br>
	<script type="text/javascript">
	new Fudel.Form('firstnameform', { 
		enableOnOk: true,
		onOK : function() {
			var form = $('firstnameform');
			var fname = form.name.value;
			$('firstname_pre_text').update(fname);
			$('firstname_edit_btn').update("edit");
			form.getElements().each(function(item){item.enable();});
			form.submit.value="Change";
			form.fade({queue: {position: 'end', scope:'dob'}});
			$('firstname_pre_text').appear({duration: 0, queue: {position: 'end', scope:'dob'}});
		},
		onError : function(obj) {
			alert(obj.ERROR);
		}
	});
	</script>

	<div class="profile_header">Last name<span onclick="window.show('lastname');" id="lastname_edit_btn" class="profile_change_section">edit</span></div>
	<div><span id="lastname_pre_text"><%= user.getLastName() %></span>  
		<form style="display:none" id="lastnameform" method="post" action="servlet/EditUserProfile">
			<p>
				<input class="biginput" type="text" id="surname" name="surname"/>
			</p> 
			<input type="submit" id="surnamebtn" class="mediumbtn" name="Change Surname" value="Change"/>
			<input type="hidden" id="type" name="type" value="2"/>	
		</form>
	</div>
<br>

	<script type="text/javascript">
	new Fudel.Form('lastnameform', { 
		enableOnOk: true,
		onOK : function() {
			var form = $('lastnameform');
			var lname = form.surname.value;
			$('lastname_pre_text').update(lname);
			$('lastname_edit_btn').update("edit");
			form.getElements().each(function(item){item.enable();});
			form.submit.value="Change";
			form.fade({queue: {position: 'end', scope:'dob'}});
			$('lastname_pre_text').appear({duration: 0, queue: {position: 'end', scope:'dob'}});
		},
		onError : function(obj) {
			alert(obj.ERROR);
		}
	});
	</script>
	<div class="profile_header">Date of birth<span onclick="window.show('dob');" id="dob_edit_btn" class="profile_change_section">edit</span></div>
		<div><span id="dob_pre_text"><%= user.getDob_nice() %></span>  
		<form style="display:none" id="dobform" method="post" action="servlet/EditUserProfile">
		<p>
		<select id="month" name="month">
	<option> - Month - </option>
	<option value="1">January</option>
	<option value="2">Febuary</option>
	<option value="3">March</option>
	<option value="4">April</option>
	<option value="5">May</option>
	<option value="6">June</option>
	<option value="7">July</option>
	<option value="8">August</option>
	<option value="9">September</option>
	<option value="10">October</option>
	<option value="11">November</option>
	<option value="12">December</option>
</select>
<select id="day" name="day">
	<option> - Day - </option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
	<option value="5">5</option>
	<option value="6">6</option>
	<option value="7">7</option>
	<option value="8">8</option>
	<option value="9">9</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	<option value="19">19</option>
	<option value="20">20</option>
	<option value="21">21</option>
	<option value="22">22</option>
	<option value="23">23</option>
	<option value="24">24</option>
	<option value="25">25</option>
	<option value="26">26</option>
	<option value="27">27</option>
	<option value="28">28</option>
	<option value="29">29</option>
	<option value="30">30</option>
	<option value="31">31</option>
</select>

<select id="year" name="year">
	<option> - Year - </option>
	<option value="2004">2004</option>
	<option value="2003">2003</option>
	<option value="2002">2002</option>
	<option value="2001">2001</option>
	<option value="2000">2000</option>
	<option value="1999">1999</option>
	<option value="1998">1998</option>
	<option value="1997">1997</option>
	<option value="1996">1996</option>
	<option value="1995">1995</option>
	<option value="1994">1994</option>
	<option value="1993">1993</option>
	<option value="1992">1992</option>
	<option value="1991">1991</option>
	<option value="1990">1990</option>
	<option value="1989">1989</option>
	<option value="1988">1988</option>
	<option value="1987">1987</option>
	<option value="1986">1986</option>
	<option value="1985">1985</option>
	<option value="1984">1984</option>
	<option value="1983">1983</option>
	<option value="1982">1982</option>
	<option value="1981">1981</option>
	<option value="1980">1980</option>
	<option value="1979">1979</option>
	<option value="1978">1978</option>
	<option value="1977">1977</option>
	<option value="1976">1976</option>
	<option value="1975">1975</option>
	<option value="1974">1974</option>
	<option value="1973">1973</option>
	<option value="1972">1972</option>
	<option value="1971">1971</option>
	<option value="1970">1970</option>
	<option value="1969">1969</option>
	<option value="1968">1968</option>
	<option value="1967">1967</option>
	<option value="1966">1966</option>
	<option value="1965">1965</option>
	<option value="1964">1964</option>
	<option value="1963">1963</option>
	<option value="1962">1962</option>
	<option value="1961">1961</option>
	<option value="1960">1960</option>
	<option value="1959">1959</option>
	<option value="1958">1958</option>
	<option value="1957">1957</option>
	<option value="1956">1956</option>
	<option value="1955">1955</option>
	<option value="1954">1954</option>
	<option value="1953">1953</option>
	<option value="1952">1952</option>
	<option value="1951">1951</option>
	<option value="1950">1950</option>
	<option value="1949">1949</option>
	<option value="1948">1948</option>
	<option value="1947">1947</option>
	<option value="1946">1946</option>
	<option value="1945">1945</option>
	<option value="1944">1944</option>
	<option value="1943">1943</option>
	<option value="1942">1942</option>
	<option value="1941">1941</option>
	<option value="1940">1940</option>
	<option value="1939">1939</option>
	<option value="1938">1938</option>
	<option value="1937">1937</option>
	<option value="1936">1936</option>
	<option value="1935">1935</option>
	<option value="1934">1934</option>
	<option value="1933">1933</option>
	<option value="1932">1932</option>
	<option value="1931">1931</option>
	<option value="1930">1930</option>
	<option value="1929">1929</option>
	<option value="1928">1928</option>
	<option value="1927">1927</option>
	<option value="1926">1926</option>
	<option value="1925">1925</option>
	<option value="1924">1924</option>
	<option value="1923">1923</option>
	<option value="1922">1922</option>
	<option value="1921">1921</option>
	<option value="1920">1920</option>
	<option value="1919">1919</option>
	<option value="1918">1918</option>
	<option value="1917">1917</option>
	<option value="1916">1916</option>
	<option value="1915">1915</option>
	<option value="1914">1914</option>
	<option value="1913">1913</option>
	<option value="1912">1912</option>
	<option value="1911">1911</option>
	<option value="1910">1910</option>
	<option value="1909">1909</option>
	<option value="1908">1908</option>
	<option value="1907">1907</option>
	<option value="1906">1906</option>
	<option value="1905">1905</option>
	<option value="1904">1904</option>
	<option value="1903">1903</option>
	<option value="1902">1902</option>
	<option value="1901">1901</option>
	<option value="1900">1900</option>
</select>
</p>
<input type="submit" id="DOBbtn" class="mediumbtn" name="Change DOB" value="Change"/>
		<input type="hidden" id="type" name="type" value="3"/>	
		<div id="dob_status"></div>
</form>
		</div>
	<br>

	<script type="text/javascript">
	new Fudel.Form('dobform', { 
		enableOnOk: true,
		onOK : function() {
			var form = $('dobform');
			var month = form.month.value;
			var year = form.year.value;
			var day = form.day.value;
			$('dob_pre_text').update(day + "/" + month + "/" + year);
			$('dob_edit_btn').update("edit");
			form.getElements().each(function(item){item.enable();});
			form.submit.value="Change";
			form.fade({queue: {position: 'end', scope:'dob'}});
			$('dob_pre_text').appear({duration: 0, queue: {position: 'end', scope:'dob'}});
		},
		onError : function(obj) {
			alert(obj.ERROR);
		}
	});
	</script>
	<div class="profile_header">Sex<span onclick="window.show('sex');" id="sex_edit_btn" class="profile_change_section">edit</span></div>
	<div><span id="sex_pre_text"><%= user.getSex() %></span>  
		<form style="display:none" id="sexform" method="post" action="servlet/EditUserProfile">
			<p>
			<select name="sex" id="sex" >
				<option> - Select Sex: - </option>
				<option value="Male">Male</option>
				<option value="Female">Female</option>
			</select>
			</p>
			<input type="submit" id="editSexbtn" class="mediumbtn" name="Change Sex" value="Change"/>
			<input type="hidden" id="type" name="type" value="4"/>	
			<div id="sex_status"></div>
		</form>
	</div>
</div>
<div id="bk_profile">
	<%
	/*String url = "http://" 
		 + request.getServerName() + ":"
		 + request.getServerPort() + "/"
		 + request.getRequestURI().split("/")[1] + "/"
		 + "router?au=to&user=" 
	  	 + request.getParameter("username")
	  	 + "&t=" + user.getToken();*/
		 
	String url = "http://" 
		 + request.getServerName() 
		 + "/"
		 + request.getRequestURI().split("/")[1] + "/"
		 + "router?au=to&user=" 
	  	 + user.getUsername()
	  	 + "&t=" + user.getToken();
	  	 
	  	 //System.out.println(user.getUsername());
	  	 //System.out.println(user.getToken());
	   
	   String bk = Utilities.createBookmarklet(url);
	   String bkurl = "javascript:(function(){if(document.getElementById('ixsq')===null){var%20k=document.createElement('script');k.id='insq';k.type='text/javascript';k.innerHTML='var%20isqzid=%22" + bk + "%22;';var%20j=document.createElement('script');j.id='ixsq';j.type='text/javascript';document.body.appendChild(k);document.body.appendChild(j).src='http://websquirrel.net/iSquirrel/js/isquirrelpoppix.js';}})();";
	
	%>	
	<div style="font-weight: bold; color: rgb(114, 114, 114);">iSquirrel Bookmarklet</div>
	<p style="font-size:0.68em"><b>Drag this bookmarklet to your bookmarks toolbar (if it's not already there!).</b>
	<br><br>
	<a class="bookmarklet" title="Drag me" href="<%= bkurl %>"><%= session.getAttribute("user") %>'s iSquirrel</a>
	<br><br>
	<p style="font-size:0.68em">A bookmarklet is a really small program. Once you have this in your toolbar, clicking on it whilst on a page will display the iSquirrel popup menu. Try it!</p>
	</p>
	
</div>
	<br><br>
<script type="text/javascript">

new Fudel.Form('sexform', { 
	enableOnOK: true,
	onOK : function() {
		var form = $('sexform');
		var sex = form.sex.value;
		$('sex_pre_text').update(sex);
		$('sex_edit_btn').update("edit");
		form.getElements().each(function(item){item.enable();});
		form.submit.value="Change";
		form.fade({queue: {position: 'end', scope:'dob'}});
		$('sex_pre_text').appear({duration: 0, queue: {position: 'end', scope:'dob'}});
	},
	onError : function(obj) {
		alert(obj.ERROR);
	}
});
</script>

<script type="text/javascript">

	window.show = function(prefix){
		if ($(prefix + '_pre_text').visible()) {
			$(prefix + '_edit_btn').update("hide");
			$(prefix + '_pre_text').hide();
			Effect.Appear( prefix + 'form', {duration: 0.4});
		}
		else {
			$(prefix + '_edit_btn').update("edit");
			$(prefix + 'form').hide();
			Effect.Appear(prefix + '_pre_text', {duration: 0.7});
		}
	};

	
</script>

